<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .box{width: 250px;
           height: 52px;
           padding: 15px;
           border: 2px solid #ccc;
           border-radius: 16px;
           margin: 0 auto;           
        }
        .box .count{
            width: 60px;
            font-size: 280%;
            line-height: 50px;
            padding-left: 6px;
            margin-left: 5px;
            border:1px solid #fff ;
        }
        .box div{margin-left:5px;float:left;width:50px;height:50px;
 	   border-radius:50px;border:1px solid #666;}
 	

    </style>
</head>
<body>
      
        <div class="box">
            <div id="red"></div>
            <div id="yellow"></div>
            <div id="green"></div>
            <div class="count" id="count"></div>
        </div>
        <script>
             key = 36;
          function get()
          {
                key--;
                if(key<60&&key>35)
                {
                  //  alert("ddd")
                    $("#green").css("background-color","green")
                }    
                else if(key>9&&key<35)
                {
                    $("#red").css("background-color","red")

                }
                else if(key<9&&key>0)
                {
                    $("#yellow").css("background-color","yellow")

                }
                else if(key==0)
                {
                    key=60;
                }
          }



        time = setInterval(() => {
                get();
        },1000);



        </script>


</body>
</html>